<template>
    <el-date-picker v-model="model"
        :type="type"
        :placeholder="placeholder"
        :picker-options="pickerOptions"
        :format="format"
        :default-value="defaultValue"
        :disabled="disabled"
        :size="size"
        :editable="!uneditable"
        :clearable="!unclearable"></el-date-picker>
</template>
<script>
    export default {
        name: 'ui-date-picker-component',
        props: {
            value: {},
            type: {},
            placeholder: {},
            minDate: {},
            maxDate: {},
            format: {
                'default': 'yyyy-MM-dd'
            },
            disabled: {},
            size: String,
            timeString:'',
            uneditable: {
                type: Boolean,
                default: false
            },
            unclearable:{
                type: Boolean,
                default: false
            }
        },
        data() {
            let _this = this
            return {
                pickerOptions: {
                    firstDayOfWeek: 1,
                    disabledDate: '',
                    onPick(val) {
                        _this.pickDate = val
                        _this.setLimit()
                    },
                    onDate(val) {
                        _this.setDefaultValue(val)
                        _this.setLimit()
                    }
                },
                model: this.checkNumber(this.value),
                pickDate: '',
                defaultValue: ''
            }
        },
        mounted() {
            let setValue = this.model ? new Date(this.model) : new Date()
            this.setDefaultValue(setValue)
            this.setLimit()
        },
        updated() {

        },
        beforeDestroy() {

        },
        watch: {
            model(val, oldVal) {
                if (this.type === 'daterange') {
                    let newVal = []
                    newVal[0] = val[0] ? (this.timeString !== undefined ? this.$bui.formatDate(val[0], this.format) : new Date(val[0]).getTime()) : '';
                    newVal[1] = val[1] ? (this.timeString !== undefined ? this.$bui.formatDate(val[1], this.format) : new Date(val[1]).getTime()) : '';
                    this.$emit('input', newVal)
                }else{
                    let valDate = val ? (typeof val !== 'object' ? new Date(val) : val) : '';
                    let newVal = valDate ? (this.timeString !== undefined ? this.$bui.formatDate(valDate, this.format) : new Date(valDate).getTime()) : '';
                    // 最小值存在时,当前选择的时间小于最小时间包括时刻，让当前时间未最小时间
                    this.setLimit()
                    this.$emit('input', this.minDate ? val.getTime() < new Date(this.minDate).getTime() ? this.minDate : newVal : newVal)
                    if (!val) this.setDefaultValue(new Date())
                }
            },
            minDate(val, oldVal) {
                let setValue = this.model ? new Date(this.model) : new Date()
                this.setDefaultValue(setValue)
                this.setLimit()
            },
            maxDate(val, oldVal) {
                let setValue = this.model ? new Date(this.model) : new Date()
                this.setDefaultValue(setValue)
                this.setLimit()
            },
            value: function(val) {
                this.model = val ? (typeof val !== 'object' ? new Date(this.checkNumber(val)) : val) : '';
            }
        },
        methods: {
            setLimit() {
                let _this = this
                if (this.minDate && this.maxDate) {
                    this.pickerOptions.disabledDate = function(time) {
                        return time.getTime() < new Date(_this.checkNumber(_this.minDate)).setHours(0, 0, 0) || time.getTime() > new Date(_this.checkNumber(_this.maxDate)).setHours(23, 59, 59)
                    }
                    if (this.type === 'datetime') {
                        if (_this.pickDate && _this.pickDate.getTime() === new Date(_this.checkNumber(_this.minDate)).setHours(0, 0, 0) && _this.pickDate.getTime() === new Date(_this.checkNumber(_this.maxDate)).setHours(0, 0, 0)) {
                            let minHours = new Date(_this.checkNumber(this.minDate)).getHours()
                            let minMinutes = new Date(_this.checkNumber(this.minDate)).getMinutes()
                            let minSeconds = new Date(_this.checkNumber(this.minDate)).getSeconds()
                            let maxHours = new Date(_this.checkNumber(this.maxDate)).getHours()
                            let maxMinutes = new Date(_this.checkNumber(this.maxDate)).getMinutes()
                            let maxSeconds = new Date(_this.checkNumber(this.maxDate)).getSeconds()
                            this.pickerOptions.selectableRange = minHours + ':' + minMinutes + ':' + minSeconds + ' - ' + maxHours + ':' + maxMinutes + ':' + maxSeconds
                        }else if (_this.pickDate && _this.pickDate.getTime() === new Date(_this.checkNumber(_this.minDate)).setHours(0, 0, 0)) {
                            let minHours = new Date(_this.checkNumber(this.minDate)).getHours()
                            let minMinutes = new Date(_this.checkNumber(this.minDate)).getMinutes()
                            let minSeconds = new Date(_this.checkNumber(this.minDate)).getSeconds()
                            this.pickerOptions.selectableRange = minHours + ':' + minMinutes + ':' + minSeconds + ' - 23:59:59'
                        }else if (_this.pickDate && _this.pickDate.getTime() === new Date(_this.checkNumber(_this.maxDate)).setHours(0, 0, 0)) {
                            let maxHours = new Date(_this.checkNumber(this.maxDate)).getHours()
                            let maxMinutes = new Date(_this.checkNumber(this.maxDate)).getMinutes()
                            let maxSeconds = new Date(_this.checkNumber(this.maxDate)).getSeconds()
                            this.pickerOptions.selectableRange = '00:00:00 - ' + maxHours + ':' + maxMinutes + ':' + maxSeconds
                        }else{
                            this.pickerOptions.selectableRange = ''
                        }
                    }
                }else if (this.minDate || this.maxDate) {
                    if (this.minDate) {
                        this.pickerOptions.disabledDate = function(time) {
                            return time.getTime() < (new Date(_this.checkNumber(_this.minDate)).setHours(0, 0, 0))
                        }
                        if (this.type === 'datetime') {
                            const valueTime = new Date(this.model||this.defaultValue).setHours(0,0,0)
                            const minDateTime = new Date(_this.checkNumber(_this.minDate)).setHours(0, 0, 0)

                            // 当前时间小于等于最小时间，小于最小时间的时分秒不能选择
                            if ( _this.pickDate && ( valueTime <= minDateTime ) ) {
                                let minHours = new Date(_this.checkNumber(this.minDate)).getHours()
                                let minMinutes = new Date(_this.checkNumber(this.minDate)).getMinutes()
                                let minSeconds = new Date(_this.checkNumber(this.minDate)).getSeconds()

                                this.pickerOptions.selectableRange = minHours + ':' + minMinutes + ':' + minSeconds + ' - 23:59:59'
                            }else{
                                this.pickerOptions.selectableRange = '00:00:00 - 23:59:59'
                            }
                        }
                    }
                    if (this.maxDate) {
                        this.pickerOptions.disabledDate = function(time) {
                            return time.getTime() > new Date(_this.checkNumber(_this.maxDate)).setHours(23, 59, 59)
                        }
                        if (this.type === 'datetime') {
                            if (_this.pickDate && _this.pickDate.getTime() === new Date(_this.checkNumber(_this.maxDate)).setHours(0, 0, 0)) {
                                let maxHours = new Date(_this.checkNumber(this.maxDate)).getHours()
                                let maxMinutes = new Date(_this.checkNumber(this.maxDate)).getMinutes()
                                let maxSeconds = new Date(_this.checkNumber(this.maxDate)).getSeconds()
                                this.pickerOptions.selectableRange = '00:00:00 - ' + maxHours + ':' + maxMinutes + ':' + maxSeconds
                            }else{
                                this.pickerOptions.selectableRange = ''
                            }
                        }
                    }
                }else{
                    this.pickerOptions.disabledDate = ''
                    this.pickerOptions.selectableRange = ''
                }
            },
            checkNumber(val) {
                return (typeof val === 'string' && val.match(/^\d{13}$/) !== null) ? Number(val) : val
            },
            setDefaultValue(val) {
                if (val.getTime() < new Date(this.checkNumber(this.minDate)).getTime()) {
                    let newDate = new Date(this.checkNumber(this.minDate))
                    newDate.setHours(0, 0, 0)
                    this.pickDate = newDate
                    this.defaultValue = new Date(this.checkNumber(this.minDate))
                }else if (val.getTime() > new Date(this.checkNumber(this.maxDate)).getTime()) {
                    let newDate = new Date(this.checkNumber(this.maxDate))
                    newDate.setHours(0, 0, 0)
                    this.pickDate = newDate
                    this.defaultValue = new Date(this.checkNumber(this.maxDate))
                }else{
                    let newDate = new Date(val)
                    newDate.setHours(0, 0, 0)
                    this.pickDate = newDate
                    this.defaultValue = val
                }
            }
        }
    }
</script>
